<style>
  
  
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 16px;
    }
  
    .card {
      border-radius: 4px;
      border: 1px solid #eee;
      background-color: #fafafa;
      height: 40px;
      width: 200px;
      margin: 0 8px 16px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      transition: all 0.2s ease-in-out;
      line-height: 24px;
    }
  
    .card-container .card:not(:last-child) {
      margin-right: 0;
    }
  
    .card.card-small {
      height: 16px;
      width: 168px;
    }
  
    .card-container .card:not(.highlight-card) {
      cursor: pointer;
    }
  
    .card-container .card:not(.highlight-card):hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 17px #00000059;
    }
  
    .card-container .card:not(.highlight-card):hover .material-icons path {
      fill: rgb(105, 103, 103);
    }
  
    .card.highlight-card {
      background-color: #1976d2;
      color: white;
      font-weight: 600;
      border: none;
      width: auto;
      min-width: 30%;
      position: relative;
    }
  
    .card.card.highlight-card ul {
      margin-left: 10px;
    }
  
    ul {
      list-style: none;
    }
  
    a,
    a:visited,
    a:hover {
      color: #1976d2;
      text-decoration: none;
    }
  
    a:hover {
      color: #125699;
    }

    .subcontent{
      margin: 0px 30% 0px 30%
    }

    .inputarea{
      display: flex;
      justify-content:center 
    }

  .inputarea form {
    margin: 10px;
  }

  .inputarea input{
    width: 400px;
  }

  
  </style>

<div class = "subcontent">
  <div class="card-container">
    <div  *ngFor ="let room of rooms ; let i=index">
      <a class="card" rel="noopener"   [routerLink] = "['/subroom', room.roomId ]"  routerLinkActive = "routerLinkActive">  
          <ul> 
            <li> 主题:  {{room.roomName}} </li>
            <li> 创建者:  {{room.owner.username}} </li>
            <li>人数：{{room.users.length}}</li>
          </ul>
      </a>
    </div>
  <div class="push"></div>
  
</div>

<div>
  <div class ="inputarea">
      <form action = "" #formobj ="ngForm">
        <input type = "text" placeholder='输入房间名字' name ="roomName" ngModel >
        <button (click) = 'createRoom(formobj)'>提交</button>
      </form>
  </div>
</div>
</div>

 
